<template>
    <div class="loginPage">
        <div class='logo'>
            <img src="../assets/image/logo_01.png" alt=""> 
        </div>
        <div class="form">
            <form @submit="submitHandle">
                <p class="login-item">
                    <i class='iconfont icon-shoujihao tubiao'></i>
                    <input type="text" v-model="regis.username" placeholder="请输入手机号" @focus="inputFocus">
                </p>
                <p class="login-item">
                    <i class='iconfont icon-icon-test tubiao'></i>
                    <input type="text" v-model="regis.verificationCode" placeholder="验证码">
                    <span class="VerificationCode">获取验证码</span>
                </p>
                <p class="login-item">
                    <i class="iconfont icon-mima tubiao"></i>
                    <input type="password" v-model="regis.password" placeholder="请输入密码" @focus="inputFocus">
                </p>
                <p class="denglutishi">{{msgTip}}</p>
                <button class="tijiao" @click="Onsubmit">提交</button>
            </form>
        </div> 
       
    </div>
</template>

<script>
import jwtDecode from 'jwt-decode'
export default {
    data() {
        return {
            regis:{
                username:'',
                password:'',
                verificationCode:'',
            },
            msgTip:''
        }
    },
    methods: {
        Onsubmit(){  
            if(this.regis.username&&this.regis.password){
                
                this.api.Register(this.regis).then(res=>{
                    this.msgTip=res.data.msg
                    // console.log(res)
                    if(res.data.success){
                        //跳转页面去登录页面
                        this.$router.replace('/login')
                    }
                })
            }         
            
        },
        inputFocus(){
            this.msgTip=''
        },
        submitHandle(e){
            e.preventDefault();
        }
    },
    components:{
        
    }

}
</script>

<style lang="less" scoped>
.loginPage{
    @basecolor:#999;
    color: @basecolor;
    background: rgba(0,0,0,.9);
    height: 100%;
    font-size: 0.32rem;
    text-align: center;
    padding: 1rem 0 0;
    box-sizing: border-box;
    .logo{
        margin: 0.5rem auto;
        img{
            width: 2rem;
        }
    }
    .form{
        width: 70%;
        margin: 0 auto;
        input{
            
            letter-spacing: 3px;
            color:@basecolor;
            background: transparent;
            font-size: 0.4rem;
            padding-left: 1rem;
            margin-top: 0.02rem;
            
        }
        .tijiao{
            display: block;
            width: 100%;
            height: 1rem;
            margin: 0.2rem auto;
            border-radius: 0.5rem;
            background: rgb(254,217,6);
            font-size: 0.44rem;
            letter-spacing: 5px;
            margin-top: 0.3rem;
        }
        .login-item{
            width: 100%;
            height: 1.3rem;
            line-height: 1.3rem;
            margin: 0.3rem auto;
            border-bottom: 0.02rem solid @basecolor;
            position: relative;
            .tubiao{
                font-size: 0.8rem;
                color:rgb(254,217,6);
                position: absolute;
                left: 0;
                top: 0.03rem;
            }
            .VerificationCode{
                display: block;
                background: rgb(254,217,6);
                width: 2.0rem;
                height: 0.6rem;
                line-height: 0.6rem;
                border-radius: 0.3rem;
                position: absolute;
                right: 0;
                top: 0.4rem;
                color: #333
            }
            input{
                margin-top: 0.4rem;
            }
            
        }
        
        .denglutishi{
            color: #CC3300;
            height: 0.8rem;
            line-height: 0.8rem;
        }
        
    }
    
    
}
</style>